<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>Layout Container</title>

       
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/Layout/css/layout-default-latest.css')}}"/>

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
        <link type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/jquery-ui-1.8.21.custom.css')}}" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/bootstrap/css/bootstrap.min.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('mainlayout/css/button.css')}}"/>
        

        <SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
        <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/jquery-ui-1.8.19/js/jquery-ui.js')}}"></SCRIPT>
        <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/Layout/js/jquery.layout-latest.js')}}"></SCRIPT>
        <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/bootstrap.js')}}"></script>
        <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/application.js')}}"></script>
        
        {#<script src="{{asset('js/jquery-infinite-carousel/jquery.infinite-carousel.js')}}"></script>#}
        {#<script src="{{asset('js/infiniteCarousel.jquery.js')}}"></script>#}

        <!-- main layout Style -->
        <link rel="stylesheet" type="text/css" href="{{asset('mainlayout/css/layout.css')}}"/>
        <link rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/style.css')}}"/>
        {#Plugin jquery du monitor#}
        <script src="{{asset('js/monitor-plugin.js')}}"></script>
        <script src="{{asset('widget/widget-plugin.js')}}"></script>

        <script type="text/javascript">
            $(document).ready(){
                    
                };
            
                var nb_widget_total;
                
                $(function() {
               /*****************************
		*     WIDGET MANAGEMENT      *
		******************************/
		//WIDGET: ONTOP sur click
		$(".widget").on("mousedown", function() {
                        nb_widget_total = $(".widget").size();
			var what_zindex = parseInt($(this).css("z-index"));
			var widget_to_modify = $(this);
			$(".widget").each(function () {
				if ( parseInt($(this).css("z-index")) > what_zindex) {
				  $(this).css("z-index","-=1");
				}
			});
			widget_to_modify.css("z-index",nb_widget_total);
			/*alert(what_zindex);*/
		});
                
		//WIDGET: DRAGGABLE
		$( ".widget" ).draggable({cursor: "move",handle: ".widget-header" ,snap: ".widget", snapMode: "outer", snapTolerance: "10"});
		//$( ".title_to_drag" ).draggable({helper: "clone",cursor: "move"});
		$( ".widget-header i.icon-move" ).draggable({helper: function( event ) {
				return $( "<div class='ui-widget-header widget-header' style='z-index:100'>I'm a custom helper</div>" );
			}
		,cursor: "move"});
		
		//WIDGET: REZISABLE
                $(".widget").resizable({
                        maxHeight: 700,
                        maxWidth: 700,
                        minHeight: 100,
                        minWidth: 200
                });
            });
            // tooltip demo
		
          </script>

            {#Script de test#}
          <script type="text/javascript" src="{{asset('loading/lightbox-fade.js')}}"></script>
          <link rel="stylesheet" href="{{asset('loading/lightbox-image.css')}}" type="text/css" media="all" />
          
          <script type="text/javascript">
            $(document).ready(function(){
                //désactive le click sur la fenetre de chargement
                $("#loading").unbind("click");
                //fin de chargement du login
                //$("#check-login-load").append("<img src='/GWIT_Plateform_Trading/web/loading/image/valide2.png'/>");
                //$(".widget_zone").widget_add();
            });
          </script>

                <!-- Initialisation du GUI -->
          <script type="text/javascript" src="{{asset('js/Init_layout.js')}}"></script>
            </head>
            <body class="tooltip-demo">
{#Div de test de la fenetre de chargement#}
                <div id="loading">
                    <div id="shadowing-loader"></div>
                    <div id="box-loader" class="modal hide" style="border: none;box-shadow: none;">
                        <div id="boxcontent-loader" onclick="closebox()">
                            <div style="margin-left: 20%;margin-top:10%;margin-bottom: 20px;">
                                <img src="{{asset('GWIT_Plateform_bootstrap/images/logo_winnarb.png')}}"/>
                            </div>
                            <div style="margin-bottom: 20px">
                                <img style="margin-left: 30%;" src='{{asset('loading/image/bar-loader1.gif')}}'/>
                            </div>
                        </div>
                            <div id="boxtitle">Chargement en cour</div>
                        <div>
                            <div id="load" style="text-align:center;"></div>
                        </div>
                    </div>
                </div>

                {#LightBox de creation d'un nouveau moniteur#}
                <div id="lightbox-newmonitor">
                    <div id="shadowing"></div>
                    <div id="box" class="modal hide" style="border:4px solid #000;">
                        <div class="modal-header">
                            <button href="#" onclick="closebox()" class="close">&times;</button>
                            <h3>Create monitor</h3>
                        </div>
                        <div class="modal-body" id="boxcontent">
                            <label>Name :</label><input id="new-monitor-name" onclick="$(this).val('')" type="text" value="New Desktop" MAXLENGTH="15"/>
                            <label>Commentaire :</label><textarea id="new-monitor-cmt" rows="2" cols="20" style="width:535px; height:100px;" ></textarea>
                        </div>
                        <div class="modal-footer" id="btn-create-desktop">
                            <a href="#" class="btn btn-primary">Create</a>
                        </div>
                    </div>
                </div>
                    
                {#LightBox update d'un moniteur TODO: Faire marcher le bouton quitter#}
                    <div id="lightbox-update-monitor">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide" style="border:4px solid #000;">
                            <div class="modal-header">
                                <button href="#" onclick="javascript:$('#lightbox-update-monitor div#shadowing').hide();
                                                                 $('#lightbox-update-monitor div#box').hide();" class="close">&times;</button>
                                        <h3>Update monitor</h3>
                                </div>
                                <div class="modal-body" id="boxcontent">
                                    <label>Name :</label><input id="update-monitor-name" onclick="$(this).select()" type="text" value="New name" MAXLENGTH="15"/>
                                    <label>Commentaire :</label><textarea id="update-monitor-cmt" onclick="$(this).select()" rows="2" cols="20"></textarea>
                                </div>
                                <div class="modal-footer" id="btn-update-desktop">
                                    <a href="#" class="btn btn-primary">Save changes</a>
                                </div>
                            </div>
                        </div>
                    
                    {#LightBox ajouter widget TODO: Faire marcher le bouton quitter#}
                    <div id="lightbox-add-widget">
                        <div id="shadowing"></div>
                        <div id="box" class="modal hide" style="border:4px solid #000;">
                            <div class="modal-header">
                                <button href="#" onclick="javascript:$('#lightbox-add-widget div#shadowing').hide();
                                                                 $('#lightbox-add-widget div#box').hide();" class="close">&times;</button>
                                <h3>Create widget</h3>
                                
                            </div>
                            <div class="modal-body" id="boxcontent">
                                <label>Name :</label><input id="add-widget-name" onclick="$(this).val('')" type="text" value="New Widget" MAXLENGTH="15"/>
                            </div>
                                <div class="modal-footer" id="btn-add-widget">
                                    <a href="#" class="btn btn-primary">create</a>
                                </div>
                            </div>
                     </div>

                        {#modalBox : confirmation de destruction#}
                        <div id="modal-from-dom" class="modal hide fade" style="border:4px solid #000;">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Delete URL</h3>
                            </div>
                            <div class="modal-body">
                                <p>Vous êtes sur le point d'effacer un bureau, cette procédure est irréversible.</p>
                                <p>Voulez vous continuer ?</p>
                            </div>
                            <div class="modal-footer">
                                <a id="delete-desktop" href="#" class="btn danger">Yes</a>
                                <a href="#" onclick="javascript:$('#modal-from-dom').modal('hide')" class="btn secondary">No</a>
                            </div>
                        </div>
                    
                    {#modalBox : confirmation de destruction#}
                        <div id="modal-from-widget" class="modal hide fade" style="border:4px solid #000;">
                            <div class="modal-header">
                                <button href="#" onclick="closebox()" class="close">&times;</button>
                                <h3>Delete widget</h3>
                            </div>
                            <div class="modal-body">
                                <p>Vous êtes sur le point d'effacer un widget, cette procédure est irréversible.</p>
                                <p>Voulez vous continuer ?</p>
                            </div>
                            <div class="modal-footer">
                                <a id="delete-widget" href="#" class="btn danger">Yes</a>
                                <a href="#" onclick="javascript:$('#modal-from-dom').modal('hide')" class="btn secondary">No</a>
                            </div>
                        </div>

                        <!-- HEADER APPLICATION -->
                        <div id="header" class="pane ui-layout-north navbar" style="overflow:none;" >
                         
                                    <div class="container-fluid">
     
      <div id="logo" href="index.html" style=""></div>
      
     <div id="myaccount" class="subnav pull-right">
          <ul class="nav nav-pills">
            <li class="desktop_setting">
		<a href="#javascript" data-toggle="dropdown"><i class="icon icon-user "></i> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
                            {{ app.user.username }}
                        {% else %}
                            <a href="{{ path('fos_user_security_login') }}">Connexion</a>
                        {% endif %} <span class="caret" style="margin-top:7px;"></span>
                </a>
                    <ul class="dropdown-menu" style="border-width:4px;">
			
			  <li>
				<div style="height:130px;width:300px;">
					<div style="margin:20px;float:left;position:relative"><span id="gbmpid" style="display:none"></span><img width="96" height="96" src="//lh5.googleusercontent.com/-ukhpVL0yL9w/AAAAAAAAAAI/AAAAAAAAAAA/JYK8167s1CI/s96-c/photo.jpg" alt="{{ app.user.username }}"></div>
					<div style="display: inline-block;margin: 16px 0 0px;vertical-align: top;"><span style="color: black;font-weight: bold;display: block;margin: 0 20px 0 0px;" >{{ app.user.username }}</span><span style="display: block;margin: 0 20px 0 0px;">{{ app.user.firstname }}</span><div style="display: block;margin: 0 20px 0 0px;"><div class="btn btn-info" style="margin:10px 0 0px">My Account</div></div></div>
				</div>

			  </li>
			 <li class="divider"></li>
			<li><div href="#" onclick="javascript:window.location.replace('{{path('fos_user_security_login')}}');" class="btn btn-danger" style="float:right"><i class="icon icon-white icon-off"></i> Logout</div></li>
			</ul>
	    </li>
      </div>	
       
         <div id="main_menu">

	  	<div class="subnav">
          
                 <ul class="nav nav-pills">
            <li class="desktop_setting">
		<a id="desktop_btn" href="#javascript" data-toggle="dropdown"><i class="icon icon-cog "></i> Desktops <span class="caret" style="margin-top:7px;"></span>
			</a>
                    <ul id="monitor_menu" class="dropdown-menu" style="border:4px solid #ccc;border:4px solid rgba(0, 0, 0, 0.2);"><a href="#javascript" data-toggle="dropdown">
			  </a>
                            <div id="desktop-grpe">
                                <!-- monitor area -->
                            </div>
			  <li class="divider"></li>
                          <li class="create-desktop"><a href="#"><i class="icon icon-cog"></i> Manage </a></li>
			  <li class="create-desktop"><a href="#"><i class="icon icon-plus"></i> New </a></li>
		    </ul>
	    </li>
	</ul>
	
	<div class="infiniteCarousel">
		 <ul class="nav nav-pills">
		    <li class="button_navi_desktop"><a href="#modals" class="back">&nbsp;<i class="icon icon-chevron-left"></i>&nbsp;</a></li>
		</ul>
     	 	<div class="wrapper">
		 <ul class="nav nav-pills" id="desktop-carousel">         
		   <!-- <li class="desktop"><a href="#modals">Administration</a></li>
		    <li class="desktop"><a href="#dropdowns">Front Office</a></li>
		    <li class="active desktop"><a href="#scrollspy">Statistics</a></li>
		    <li class="desktop"><a href="#tabs">Test</a></li>
		   <li class="desktop"><a href="#modals">Desktop 5</a></li>
		    <li class="desktop"><a href="#dropdowns">Desktop 6</a></li>
		    <li class="desktop"><a href="#scrollspy">Desktop 7</a></li>
		   -->
		 </ul>
		</div>
		 <ul class="nav nav-pills">
                     <li class="button_navi_desktop"><a href="#modals" class="forward">&nbsp;<i class="icon icon-chevron-right"></i>&nbsp;</a></li>
		 </ul>
  	</div>
           <ul class="nav nav-pills new-desktop">
		<li class="create-desktop" ><a href="#typeahead"><i class="icon icon-plus"></i> New</a></li>
	   </ul>
        </div>
	</div>
    </div>                 
</div><!-- fin header -->
        <div id="center" class="pane-main ui-layout-center">
            <!-- FIN TAB CONTENT -->
        </div>
        <!-- FIN TAB CONTENT -->
        <script type="text/javascript" src="{{asset('js/window.js')}}"></script>
    </body>
</html>